<template>
    <div>
        <el-dialog :title="isedit ? '修改商品分类' : '添加商品分类'" :visible.sync="isshow" center :before-close="esc">
            <el-form :model="form" :rules="rules" ref="formName">

                <el-form-item label="规格名称" :label-width="formLabelWidth" prop="specsname">
                    <el-input v-model="form.specsname" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item v-for="(item, index) in attrArr" label="规格属性" :key="index" :label-width="formLabelWidth">
                    <el-input v-model="item.value" class="inpInfo" autocomplete="off"></el-input>
                    <el-button v-if="index == 0" type="primary" @click="addAttr">新增规格属性</el-button>
                    <el-button v-else type="danger" @click="del(index)" style="margin:0px 30px;">删除</el-button>
                </el-form-item>

                <el-form-item label="状态" :label-width="formLabelWidth">
                    <el-switch v-model="form.status" active-color="#13ce66" inactive-color="#ff4949" :active-value="1"
                        :inactive-value="2">
                    </el-switch>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="esc">取 消</el-button>
                <el-button type="primary" @click="sure">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import { specsadd, specsedit, specsinfo } from '../../request/app'
export default {
    props: ['isshow', 'isedit'],
    data() {
        return {
            dialogImageUrl: '',
            dialogVisible: false,
            fileList: [],
            // isshow:true,
            dialogTableVisible: false,
            dialogFormVisible: false,
            form: {
                specsname: '',
                attrs: '',
                status: ''
            },
            rules: {
                specsname: [
                    { required: true, message: '请输入规格名称', trigger: 'blur' },
                ],
            },
            formLabelWidth: '120px',
            //设置一个空数组，用于循环动态input
            attrArr: [
                {
                    value: "",
                },
            ],

        };
    },
    computed: {
        ...mapGetters({
            getlist: 'tospecs/getlist',
        })
    },
    mounted() {
        console.log(this.$img);

    },
    methods: {
        ...mapActions({
            // ACsetlist: 'setmange/ACsetlist',
            // ACgetlistpeo:'setpeople/ACgetlistpeo'
            ACsetlist: 'tospecs/ACsetlist',
            ACgetpage: 'tospecs/ACgetpage'
        }),
        del(index){
            this. attrArr.splice(index,1)
        },
        // 新增一个规格
        addAttr() {
            if (this.attrArr.length > 6) {
                this.$message.warning("最多添加6条");
            } else {
                this.attrArr.push({
                    value: ''
                })
            }
        },

        esc() {
            // console.log(e);
            this.$emit('isshow', false)
            this.resize()
        },
        sure() {
            // console.log(e);
            // console.log(this.form);

            this.$refs.formName.validate((e) => {

                if (e) {

                    if (this.isedit) {
                        console.log('rrrrr');
                        // 修改事件
                        // console.log(1111111111, 'edit');
                        this.form.attrs = this.attrArr
                            .map((item) => item.value)
                            .join(",");

                        console.log(this.form,'靠靠靠靠靠靠靠靠靠靠靠靠靠靠靠靠靠靠靠');
                        specsedit(this.form)
                            .then(res => {
                                console.log(res);
                                this.esc()
                                this.ACsetlist()
                            })

                        console.log(this.getlist);

                    } else {
                        // 添加事件
                        this.form.attrs = this.attrArr
                            .map((item) => item.value)
                            .join(",");
                        console.log(this.form);
                        specsadd(this.form)
                            .then(res => {
                                console.log(res);
                                this.esc()
                                this.ACgetpage()
                                this.ACsetlist()

                            })
                    }
                }
            })

        },
        // 重置
        resize() {
            this.form = {
                specsname: '',
                attrs: '',
                status: ''
            }
            this.$refs.formName.resetFields();
            this.attrArr=[
                {
                    value: "",
                },
            ]
        },
        // 修改的打开对话框
        lookup(id) {
            // 数据回显
            specsinfo({
                id
            })
                .then(res => {
                    console.log(res.list[0].specsname, '回显');
                    this.form.specsname = res.list[0].specsname
                    this.form.status =res.list[0].status
                    this.form.id = id
                    res.list[0].attrs.map((item, index) => {
                        // console.log(item, "每一项属性");
                        if (index == 0) {
                            this.attrArr[0].value = item
                        } else {
                            this.attrArr.push({
                                value: item,
                            });
                        }
                    });
                    // console.log(this.form, '回显');
                })
        },

    },
    components: {
    },
}
</script>

<style scoped>
.inpInfo {
    width: 63%;
}
</style>
